<template>
  <div class="discounts-block-item" @click="toDiscount">
    <div class="img-wrap">
      <img :src="info.img" alt="暂无图片" v-if="info.img"/>
      <div v-else>暂无图片</div>
    </div>
    <div class="title" :title="info.title">
      【{{info.company_name}}】{{info.title}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'DiscountsBlockItem',
  props: {
    info: {
      type: Object,
      default() {
        return {
          id: 1,
          title: '优惠券'
        };
      }
    }
  },
  methods: {
    toDiscount() {
      this.$router.push({
        name: 'discountDetail',
        params: {
          id: this.info.id
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global.less';
  .discounts-block-item {
    padding: 10px;
    cursor: pointer;
    .img-wrap {
      img,
      div {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 150px;
        border: 1px solid #ddd;
        background-color: #eee;
      }
    }
    .title {
      line-height: 30px;
      font-size: 16px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      cursor: pointer;
    }
  }
</style>
